<template>
  <div>
    <div class="top">
      <!-- 左边logo -->
      <div class="top-left">
        <a href="#"><img :src="imgUrl" /></a>
      </div>
      <!-- 中间区域 -->
      <ul>
        <router-link
          :to="`${item.path}`"
          v-for="(item, index) in info"
          :key="index"
          @click="changecolor(index)"
          active-class="active"
          class="ac"
        >
          {{ item.name }}
        </router-link>
      </ul>
      <!-- 搜索框 -->
      <div class="search">
        <img :src="imgUrl2" class="icon-search" />
        <input type="text" ref="child" @blur="test" />
        <label style="font-size: 12px" @click="quxiao" v-show="show"
          >音乐/视频/电台/用户</label
        >
      </div>
      <!-- 右边区域 -->
      <div class="top-right">
        <el-button plain @click="open3" class="t-r-but">创作者中心</el-button>
        <a class="t-r-but2" @click="dengl">登录</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Top",
  data() {
    return {
      imgUrl: require("../assets/topbar.png"),
      imgUrl2: require("../assets/sousu.png"),
      info: [
        { name: "发现音乐", path: "/home" },
        { name: "我的音乐", path: "/mymusic" },
        { name: "关注", path: "/guanzhu" },
        { name: "商城", path: "/shangcheng" },
        { name: "音乐人", path: "/singer" },
        { name: "下载客户端", path: "/download" },
      ],
      currentId: 0,
      show: true,
    };
  },
  methods: {
    quxiao() {
      this.show = false;
      let childMessage = this.$refs.child;
      setTimeout(() => {
        childMessage.focus();
        console.log("1");
      }, 10);
    },
    test() {
      this.show = true;
    },
    changecolor(index) {
      console.log("1");
      this.currentId = index;
    },
    dengl() {
      this.$bus.$emit("denglu", true);
    },
    open3() {
      this.$notify.info({
        title: "消息",
        message: "尽情期待～",
      });
    },
  },
};
</script>

<style scoped>
.active {
  background-color: #000000;
  color: #ffffff;
}
.top {
  position: relative;
  background-color: #242424;
  height: 70px;
  padding: 0 140px;
}
.top-left a {
  display: block;
  width: 180px;
  height: 70px;
  line-height: 97px;
  overflow: hidden;
}
img {
  margin-left: 3px;
}
ul .ac {
  height: 50px;
  padding: 10px 19px;
  float: left;
  line-height: 50px;
  color: #ccc;
  font-size: 14px;
}
ul {
  position: absolute;
  top: 0;
  left: 330px;
}
ul .ac:hover {
  background-color: #000000;
  color: #ffffff;
}

input {
  position: absolute;
  top: 7px;
  left: 26px;
  border: none;
  outline: none;
  width: 124px;
  height: 19px;
}
.search {
  position: absolute;
  top: 19px;
  right: 343px;
  width: 158px;
  height: 32px;
  border-radius: 20px;
  background-color: #fff;
}
.icon-search {
  position: absolute;
  top: 8px;
  left: 0px;
  width: 17px;
}
label {
  position: absolute;
  top: 8px;
  left: 30px;
  cursor: text;
  color: #9b9b9b;
}
.top-right {
  position: absolute;
  right: 0px;
  top: 0px;
}
.t-r-but {
  display: block;
  width: 92px;
  height: 30px;
  border: 1px solid #4f4f4f;
  border-radius: 13px;
  padding: 5px 10px;
  color: #c7c7c7;
  font-size: 14px !important;
  margin-right: 239px;
  margin-top: 22px;
  background-color: #242424;
}
.t-r-but:hover {
  color: #fff !important;
  background-color: #242424 !important;
  border: 1px solid #fff !important;
}
.t-r-but2 {
  position: absolute;
  top: 28px;
  right: 195px;
  color: #787878;
  font-size: 12px;
  cursor: pointer;
}
.t-r-but2:hover {
  text-decoration: underline;
}
</style>
